<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>File Sharing + Text Chat using RTCMultiConnection ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">

    <style>
    td {
        vertical-align: top;
    }
    
    #chat-output div,
    #file-progress div {
        border: 1px solid black;
        border-bottom: 0;
        padding: .1em .4em;
    }
    
    input {
        border: 1px solid black;
        font-family: inherit;
        margin: .1em .3em;
        outline: none;
        padding: .1em .2em;
        width: 97%;
    }
    
    #chat-output,
    #file-progress {
        margin: 0 0 0 .4em;
        max-height: 12em;
        overflow: auto;
    }
    </style>
    <!-- for HTML5 el styling -->
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <script src="//cdn.webrtc-experiment.com/firebase.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/FileBufferReader.js">
    </script>
</head>

<body>
    <article>
        <header>
            <h1>File Sharing + Text Chat using <a href="http://www.RTCMultiConnection.org/">RTCMultiConnection</a>
            </h1>

            <p>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>

        <section>
            <h2>Open Data Channel</h2>
            <input type="text" id="channel" value="channel" style="font-size: 1.1em; text-align: right; width: 4em;" title="channel name - use your own channel name">
            <button id="init-RTCMultiConnection">Open</button>
            <h2>or join:</h2>
            <button id="join-RTCMultiConnection">Join</button>
        </section>
        <table style="border-left: 1px solid black; width: 100%;">
            <tr>
                <td>
                    <h2 style="display: block; font-size: 1em; text-align: center;">Text Chat</h2>

                    <div id="chat-output"></div>
                    <input type="text" id="chat-input" style="font-size: 1.2em;" placeholder="chat message" disabled>
                </td>
                <td style="background: white; border-left: 1px solid black;">
                    <h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
                    <input type="file" id="file" disabled>

                    <div id="file-progress"></div>
                </td>
            </tr>
        </table>
        <script>
        document.getElementById('channel').value = Math.round(Math.random() * 60535) + 500000;
        var connection = new RTCMultiConnection();

        connection.session = {
            data: true
        };

        // [optional] onmessage/onopen is for sending/receiving data/text
        connection.onmessage = function(e) {
            appendDIV(e.data);
        };

        connection.onopen = function() {
            if (document.getElementById('chat-input')) document.getElementById('chat-input').disabled = false;
            if (document.getElementById('file')) document.getElementById('file').disabled = false;

            if (document.getElementById('init-RTCMultiConnection')) document.getElementById('init-RTCMultiConnection').disabled = true;
        };

        document.getElementById('init-RTCMultiConnection').onclick = function() {
            connection.open(document.getElementById('channel').value || 'channel');
            document.getElementById('join-RTCMultiConnection').disabled = true;
            document.getElementById('init-RTCMultiConnection').disabled = true;
        };

        document.getElementById('join-RTCMultiConnection').onclick = function() {
            connection.connect(document.getElementById('channel').value || 'channel');
            document.getElementById('join-RTCMultiConnection').disabled = true;
            document.getElementById('init-RTCMultiConnection').disabled = true;
        };

        document.getElementById('file').onchange = function() {
            var file = this.files[0];
            connection.send(file);
        };

        var chatOutput = document.getElementById('chat-output');

        connection.body = document.getElementById('file-progress');

        function appendDIV(data) {
            var div = document.createElement('div');
            div.innerHTML = data;

            chatOutput.insertBefore(div, chatOutput.firstChild);

            div.tabIndex = 0;
            div.focus();
        }

        document.getElementById('chat-input').onkeypress = function(e) {
            if (e.keyCode !== 13 || !this.value) return;
            appendDIV(this.value);
            connection.send(this.value);
            this.value = '';
            this.focus();
        };
        </script>
        <br/>
        <br/>

        <h2>Getting started with <a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">RTCMultiConnection</a>
        </h2>
        <pre>
            &lt;script src="<a href="https://cdn.webrtc-experiment.com/RTCMultiConnection.js" target="_blank">https://cdn.webrtc-experiment.com/RTCMultiConnection.js</a>"&gt;&lt;/script&gt; &lt;script&gt; var connection = new
            <strong>RTCMultiConnection</strong>(); connection.

            <strong>session</strong> = { data: true }; // to create/open a new session connection.
            <strong>open</strong>('session-id'); // if someone already created a session; to join it: use "connect" method connection.
            <strong>connect</strong>('session-id'); // to send text/data or file connection.
            <strong>send</strong>(file || data || 'text'); &lt;/script&gt;
        </pre>
        Remember, A-to-Z, everything is optional! You can set
        <strong>session-id</strong> in constructor or in
        <strong>open</strong>/
        <strong>connect</strong> methods. It is your choice!

        <br/>
        <br/>

        <h2>Features:</h2>
        <ol>
            <li>Share file directly &#8212; of any size</li>
            <li>Share text-message of any length</li>
            <li>Share data directly</li>
        </ol>
        <br/>
        <br/>

        <h2>Additional:</h2>
        <pre>
            &lt;script&gt; // to be alerted on data ports get open connection.
            <strong>onopen</strong> = function(e) {} // to be alerted on data ports get new message connection.
            <strong>onmessage</strong> = function(e) {} var progressHelper = {}; // to make sure file-saver dialog is not invoked. connection.autoSaveToDisk = false; connection.onFileProgress = function (chunk, uuid) { var helper = progressHelper[chunk.uuid]; helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max; updateLabel(helper.progress, helper.label); }; connection.onFileStart = function (file) { var div = document.createElement('div'); div.title = file.name; div.innerHTML = '&lt;label&gt;0%&lt;/label&gt; &lt;progress&gt;&lt;/progress&gt;'; document.body.appendChild(div); progressHelper[file.uuid] = { div: div, progress: div.querySelector('progress'), label: div.querySelector('label') }; progressHelper[file.uuid].progress.max = file.maxChunks; }; connection.onFileEnd = function (file) { progressHelper[file.uuid].div.innerHTML = '&lt;a href="' + file.url + '" target="_blank" download="' + file.name + '"&gt;' + file.name + '&lt;/a&gt;'; }; function updateLabel(progress, label) { if (progress.position == -1) return; var position = +progress.position.toFixed(2).split('.')[1] || 100; label.innerHTML = position + '%'; } &lt;/script&gt;
        </pre>
        <br/>
        <br/>

        <h2>Errors Handling</h2>
        <pre>
            &lt;script&gt; // error to open data ports connection.
            <strong>onerror</strong> = function(e) {} // data ports suddenly dropped connection.
            <strong>onclose</strong> = function(e) {} &lt;/script&gt;
        </pre>

        <br/>
        <br/>

        <h2>
            <a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">Source code















                    and Documentation on Github!</a>
        </h2>
        <br/>
        <br/>
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>

        <section class="experiment own-widgets latest-commits">
            <h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master">Latest Updates</a>
            </h2>
            <div id="github-commits"></div>
        </section>
    </article>
    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/licence/">MIT License</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
            <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>
    <script src="//cdn.webrtc-experiment.com/commits.js">
    </script>
</body>

</html>